<template>
  <div class="search">
    <div class="top">
      <div class="getback" @click="goback">
        <van-icon name="arrow-left" />返回
      </div>
      <div class="search_top">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @input="getnull(value)"
        />
      </div>
      <div class="gosearch" @click="goSearch(value)">搜索</div>
    </div>
    <div class="history" v-show="historylist.length > 0">
      <div class="delete_box" @click="deletehistory">
        <van-icon name="cross" />
      </div>
      <ul>
        <li
          v-for="(item, index) in historylist"
          :key="index"
          @click="gotosearch(index)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="hot">
      <h3>热门搜索</h3>
      <ul>
        <li
          v-for="(item, index) in hotList"
          :key="index"
          @click="btnSearch(index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="issuelist_box">
      <div
        class="issue"
        v-for="(item, index) in searchlist"
        :key="index"
        @click="gomene(item.id, index)"
      >
        <div class="issuelist">
          <div class="issue_left">
            <img class="aout_img" :src="item.img" alt="" />
          </div>
          <div class="issue_right">
            <div class="title">{{ item.n }}</div>
            <!--  -->
            <div class="yon">
              <div class="yimg">
                <img class="aout_img" :src="item.a.p" alt="" />
              </div>
              <div class="ytitle">
                {{ item.a.n }}<span>Lv{{ item.a.lvl }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      value: "",
      searchlist: [],
      historylist: [],
      hotList: [],
    };
  },
  methods: {
    // 搜索框内容为空
    getnull(val) {
      if (val == "") {
        this.searchlist = [];
      }
    },

    gomene(id, index) {
      if (this.searchlist[index].vfurl) {
        this.$router.push({ name: "v-menu", params: { id } });
      } else if (!this.searchlist[index].vfurl) {
        this.$router.push({ name: "menu", params: { id } });
      }
    },
    goback() {
      this.$router.go(-1);
    },

    actionget() {
      let getdish = JSON.parse(localStorage.getItem("dishName"));
      if (getdish == undefined) {
        return;
      }
      if (getdish.length > 0) {
        getdish.forEach((ele) => {
          this.historylist.push(ele);
        });
      }
    },
    // 获取搜索数据
    goSearch(val) {
      if (val == "") {
        return;
      }
      this.searchlist = [];
      this.axios({
        method: "get",
        url: `/recipe/search?keyword=${this.value}&order=0&type=0&offset=0&limit=20`,
      })
        .then((result) => {
          // console.log("goSearch", result.data.result.list);
          let res = result.data.result.list;
          res.forEach((element) => {
            if (element.type == 13) {
              this.searchlist.push(element.r);
            }
          });
          // console.log(this.searchlist);
        })
        .catch((err) => {
          console.log(err);
        });

      // 本地储存;
      let getArr = JSON.parse(localStorage.getItem("dishName"));
      let arr = [];
      if (getArr != undefined) {
        getArr.forEach((ele) => {
          arr.push(ele);
        });
        if (arr.indexOf(val) == -1) {
          arr.push(val);
        }
      } else {
        arr.push(val);
      }
      // console.log(arr);
      localStorage.setItem("dishName", JSON.stringify(arr));

      let getdish = JSON.parse(localStorage.getItem("dishName"));
      if (getdish.length > 0) {
        this.historylist = [];
        getdish.forEach((ele) => {
          this.historylist.push(ele);
        });
        // console.log(this.historylist);
      }
    },

    // 获取热门搜索数据
    gethotlidt() {
      this.axios({
        method: "get",
        url: `/recipe/search/hot`,
      })
        .then((result) => {
          // console.log(result.data.result.suggests);
          let hotres = result.data.result.suggests;
          hotres.forEach((ele) => {
            this.hotList.push(ele);
          });
          // console.log(this.hotList);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 点击清空所有本地存储
    deletehistory() {
      localStorage.removeItem('dishName');
      this.historylist = [];
    },
    gotosearch(index) {
      // console.log(this.historylist[index]);
      this.value = this.historylist[index];
    },
    btnSearch(index) {
      this.value = this.hotList[index].name;
      // console.log(this.hotList[index].name);
    },
  },
  created() {
    this.actionget();
    this.gethotlidt();
  },
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  height: 100%;
  .top {
    width: 90%;
    height: 60px;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    .search_top {
      width: 70%;
    }
    .getback {
      margin-top: 10px;
      width: 15%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      //   background-color: aquamarine;
    }
    .gosearch {
      margin-top: 10px;
      width: 15%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background-color: #feca2d;
      border-radius: 10px;
    }
  }
  .history {
    position: relative;
    width: 90%;
    margin: 0 5%;
    min-height: 40px;
    .delete_box {
      position: absolute;
      top: -5px;
      right: 0px;
      width: 15px;
      height: 15px;
      text-align: center;
      line-height: 15px;
      border-radius: 50px;
      border: 1px solid #ccc;
    }
    ul {
      width: 100%;
      min-height: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      li {
        min-width: 40px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        padding: 0 5px;
        background-color: #feca2d;
        margin-right: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
      }
    }
  }
  .hot {
    width: 90%;
    min-height: 150px;
    margin: 0 5%;
    padding: 10px 0;
    border-top: 1px solid #feca2d;
    border-bottom: 1px solid #feca2d;
    h3 {
      background-color: #feca2d;
      padding: 5px;
    }
    ul {
      width: 100%;
      min-height: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      li {
        min-width: 40px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        padding: 0 5px;
        border: 1px solid #feca2d;
        margin-right: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
      }
    }
  }
  .issuelist_box {
    width: 90%;
    margin: 0 5%;
    min-height: 30px;
  }
}
.issue {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #feca2d;
}
.issuelist {
  width: 90%;
  height: 100px;
  padding: 10px 5%;
  display: flex;
  justify-content: space-between;
  .issue_left {
    width: 45%;
    height: 80px;
    border: 1px solid #ccc;
    overflow: hidden;
  }
  .issue_right {
    width: 50%;
    height: 100%;
    .title {
      font-size: 0.4rem;
      font-weight: bold;
      margin: 20px 0 10px 0;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .yon {
      margin: 10px 0 5px 0;
      .yimg {
        float: left;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #ccc;
        overflow: hidden;
      }
      .ytitle {
        margin-left: 10px;
        float: left;
        font-size: 0.4rem;
        span {
          font-size: 0.3rem;
          color: #feca2d;
        }
      }
    }
  }
}
.aout_img {
  width: 100%;
  display: block;
}
</style>